<!DOCTYPE html>
<html lang="en">
<head>
    <title>公司产品列表</title>
    @include("/common/_container.html"){}
    <link rel="stylesheet" href="${ctxPath}/static/css/product_list.css">
</head>
<body>

<!-- 缓冲动画 -->
@include("/common/_loader.html"){}
<!-- Header -->
@include("/common/_header.html"){}
<!-- /Header -->
<!--面包屑导航-->
<section class="section-page-header">
    <div class="container">
        <div class="row">

            <!-- Breadcrumbs -->
            <div class="col-md-4">
                <ul class="breadcrumb">
                    <li><i class="fa fa-fw fa-home"></i> <a href="${ctxPath}/index.html">首页</a></li>
                    <li>产品列表</li>
                </ul>
            </div>
            <!-- /Breadcrumbs -->

        </div>
    </div>
</section>
<!--产品列表开始-->
<div class="container">
    <div class="row">

        <div align="center">
            <button class="btn filter-button" data-filter="all" onclick="showProduct('0')">全部</button>
            @for(categorie in categories){
                <button class="btn filter-button" data-filter="${strutil.replace(categorie.english_name,' ','')}" onclick="showProduct(${categorie.id})">${categorie.simple_name}</button>
            @}
        </div>
        <br/>
        @for(product in products){
        <div class="gallery_product col-lg-3 col-md-3 col-sm-4 col-xs-6 filter ${product.category_english_name}">
            <a href="${ctxPath}/jhcb/product/product_detail/${product.id}.html" class="gallery-image"><img src="${product.img_src}" class="img-responsive"></a>
        </div>
        @}
    </div>
</div>

<!--产品列表结束-->

<!-- Footer -->
@include("/common/_footer.html"){}
<!-- /Footer -->

</body>
<script>
    function showProduct(category) {
        window.location.href = "${ctxPath}/jhcb/product/product/"+category+".html";
    }
</script>
</html>
